<template>
  <div class="right">
    <div class="wdsc select" >
      <div class="tp af">
        <div class="lf">
          <div class="mc" :style="'background-image:url(https://exam.zhonghaiqihang.com/'+title.gr.avatar"></div>
          <img :src="'https://exam.zhonghaiqihang.com/'+title.gr.avatar" width="100px" height="100px" class="tx">
          <p class="nm">{{title.gr.username}}</p>
          <p class="zh">账号：{{title.gr.name}}</p>
        </div>
        <div class="rt">
          <h4>我的钱包<a href="javascript:;" class="jftca"><span></span>积分规则</a></h4>
          <ul class="jf af">
            <li class="li1"><img src="~/assets/img/wdsc1.png">
              <p class="p1">{{title.qbdd.giveScore}}</p>
              <p class="p2">赠送积分</p>
            </li>
            <li class="li2"><img src="~/assets/img/wdsc2.png">
              <p class="p1">{{title.qbdd.totalScore}}</p>
              <p class="p2">累计积分</p>
            </li>
            <li class="li3"><img src="~/assets/img/wdsc3.png">
              <p class="p1">{{title.qbdd.useScore}}</p>
              <p class="p2">已使用积分</p>
            </li>
            <li class="li4"><img src="~/assets/img/wdsc4.png">
              <p class="p1">{{title.qbdd.surplusScore}}</p>
              <p class="p2">剩余积分</p>
            </li>
          </ul>

        </div>
      </div>



      <div class="ddzx" >
        <h3>订单中心</h3>
        <div class="ddzx2">
          <div class="top">
            <ul class="af">
              <li class="li1" @mouseover=qh(0) :class="select==0?'select':''">全部订单</li>
              <li class="li2" @mouseover=qh(1) :class="select==1?'select':''">展示中订单</li>
              <li class="li3" @mouseover=qh(2) :class="select==2?'select':''">过期订单</li>
            </ul>
          </div>
          <div class="ct">
            <div class="ctno">
              <img src="~/assets/img/ddzx-no.png" width="254px" height="179px">
              <p>还没有任何订单呢 <br><a href="javascript:;">去挑选好物>></a></p>
            </div>
            <div class="ct2">
              <table>
                <tr class="tr1">
                  <th class="th1">序号</th>
                  <th class="th2">展示位名称</th>
                  <th class="th3">订单号</th>
                  <th class="th4">支付积分</th>
                  <th class="th5">购买日期</th>
                  <th class="th6">有效期至</th>
                  <th class="th7">状态 </th>
                  <th class="th8">操作 </th>
                </tr>
                <tr v-for="(data,id) in dingdan.showNumOrderRes?dingdan.showNumOrderRes.slice(sl3*10,(sl3+1)*10):[]" :key="id">
                  <td class="th1 td1">{{id+1}}</td>
                  <td class="th2 td2">{{data.servicename}}</td>
                  <td class="th3 td3">{{data.ordernumber}}</td>
                  <td class="th4 td4">-{{data.payscore}}</td>
                  <td class="th5 td5">{{data.buytime}}</td>
                  <td class="th6 td6">{{data.endtime}}</td>
                  <td class="th7 td7">{{data.orderstatus==1?'展示中':'已过期'}}</td>
                  <td class="th8 td8"><a href="javascript:;" @click="data.orderstatus==1?tzlj(data.sid,data.pid):dkgm(data.uid,data.sid)">{{data.orderstatus==1?'查看详情':'再次购买'}}</a></td>
                </tr>
              </table>
              <div class="dba" :style="this.dingdan.showNumOrderRes?'':'display:none'">
                <span>{{this.dingdan.countNum}}条</span>
                <a href="javascript:;" class="syy" @click="syy">上一页</a>
                <a href="javascript:;" v-for="(i,id) in sl2" @click="qh2(id)" :class="id==sl3?'select':''">{{i}}</a>
                <a href="javascript:;" class="xyy" @click="xyy">下一页</a>
              </div>
              <div style="line-height: 80px;text-align: center;font-size: 18px;color: #666;" :style="this.dingdan.showNumOrderRes?'display:none':''">
                无订单信息
              </div>
            </div>
          </div>
        </div>

      </div>


    </div>

    <div class="tc" style="display: none">
      <span>×</span>
      {{tcmsg}}
    </div>
    <div class="gmtc" :class="goumai.select==0?'':'select'">
      <div class="ct">
        <h3>{{goumai.title}}(展示位)</h3>
        <p class="p1"><span>{{goumai.jifen}}</span>积分</p>
        <p class="p2">{{goumai.title}}(展示位)</p>
        <p class="p3">当前拥有积分:{{goumai.userjf}}</p>
        <a href="javascript:;" class="ljgm" @click="gmjf(title.id,goumai.id)">立即购买</a>
        <a href="javascript:;" class="close" @click="gmgb()"></a>
      </div>
    </div>
    <div class="jfgztc">
      <div class="jfct">
        <div class="nr">
          <h4>积分规则说明</h4>
          <div>
            <h5 >一、积分获得 </h5>
            <p style="margin-top: 15px">1、首次登陆获得；</p>
            <p>（1）首次登录后完善个人信息，获赠200积分；</p>
            <p>（2）首次登陆未完善个人信息，之后填写完成个人信息，不再获赠200积分。</p>
            <p style="margin-top: 20px">2、按员工个人每月业绩达成比例获得；</p>
            <p>（1）每月业绩目标达成，超出目标业绩部分按5%计算积分；</p>
            <p>（2）每月业绩目标达成，完成目标业绩部分按3%计算积分；</p>
            <p>（3）每月业绩目标未达成，取得业绩按3%计算积分。</p>
            <p>注：积分计算保留到个位，小数点后省略。</p>
            <p class="p2" style="margin-top: 10px">例1：业绩目标达成，A员工入职满12个月，业绩为6万元（业绩目标为4万元），业绩目标部分获得积分为：<br>40000×3%＝1200积分；超出业绩目标部分为2万元，超出业绩目标部分获得积分为：20000×5%＝1000积分；因此，A员工应获得积分为：1200＋1000＝2200积分。<br/>
              例2：业绩目标未达成，B员工入职满12个月，业绩为3万元（业绩目标为4万元），B员工获得积分为：30000×3%＝900积分，因此，B员工应获得积分为：900积分。</p>
            <p style="margin-top: 18px">3、其他获得积分方式，突出贡献，获得积分100-1000积分。</p>
            <p>（1）提出合理、可行性建议或意见，利于公司长远发展；</p>
            <p>（2）推荐人才，推荐的人员入职后工作努力、敬业、积极向上、具有团队精神。</p>
          </div>
          <div>
            <h5 style="margin-top: 10px">二、积分扣除</h5>
            <p style="margin-top: 10px">1、业绩数据信息录入错误，一条信息录入错误扣除10积分，两条信息录入错误扣除20积分，以此类推，以信息修改记录为准；（同一条信息修改多次，只扣一次10积分）</p>
            <p>2、CC对话：（以下每项：每次扣除10积分）</p>
            <p>（1）漏接电话；</p>
            <p>（2）态度不友好；</p>
            <p>（3）不解答，直接要微信或电话。</p>
          </div>
          <div>
            <h5>三、积分使用</h5>
            <p style="margin-top: 15px">1、员工积分，可以累积，不清零，长期有效；</p>
            <p>2、员工积分不能兑换现金，不可转让；</p>
            <p>3、每月15日前系统按员工上月业绩金额兑换积分；</p>
            <p>4、购买展示位步骤：登陆服务者中心——点击我要购买——进入展示位商城——选择要购买的展示位——点击购买；</p>
            <p>5、每个展示位有效期为5天，购买成功后即刻生效，周末不顺延，无法取消或更换；</p>
            <p>6、一人可同时购买多个展示位。</p>
          </div>


        </div>
        <a href="javascript:;" class="close"></a>
      </div>

    </div>

  </div>
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
  export default {
    props: ['foobar'],
    data () {
      return {
        select:0,
        title:null,
        shuju:null,
        dingdan:[],
        tcmsg:'',
        sl2:[1],
        sl3:0,
        fuwu:1,
        shuju1:{
          one:0,
          two:0,
          three:0,
          four:0,
          five:0
        },
        goumai:{
          title:'',
          jifen:0,
          userjf:0,
          select:0,
          id:0
        }
      }
    },
    async asyncData ({req,params,query}){
    let a = req.headers.cookie;
    let cookie = '';
    if(a.indexOf('userinfoRes')!=-1){
      let b = a.split('userinfoRes=');
      let c = b[1].split(';');
      cookie = c[0];
    }
    let a5 = 'https://exam.zhonghaiqihang.com/PInterface/UserCenter/allShowNumOrder?userid='+cookie;
    let gr = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/userCenterIndexData?userid=`+cookie);
    // let gr2 = await axios.get(a6);
    let nh5 = await axios.get(a5);
    let nh6 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/inDisplayShowNumOrder?userid=`+cookie);
    let nh7 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/overdueShowNumOrder?userid=`+cookie);
    let data  = {qbdd:nh5.data,gr:gr.data,zszdd:nh6.data,gqdd:nh7.data,id:cookie};
    return { title: data}
  },
    mounted:function(){

      if(this.title.gr == 'go_signin'){
        this.$router.push('/Login');
        setCookie('userinfoRes','',-1);
      }else if(this.title.gr == 'userid_error'){
        this.$router.push('/Login');
        setCookie('userinfoRes','',-1);
      }else if(this.title.gr == 'userinfo_is_null'){
        this.$router.push('/Login');
        setCookie('userinfoRes','',-1);
      }else if(this.title.gr == 'userinfo_banuse'){
        this.$router.push('/Login');
        setCookie('userinfoRes','',-1);
      }
      else if(this.title.gr == 'serviceid_is_null'){
        window.open('/Order',_self);
      } else if(this.title.gr == 'serviceid_error'){
        window.open('/Order',_self);
      }else if(this.title.gr == 'serviceinfo_is_null'){
        window.open('/Order',_self);
      }else if(this.title.gr == 'serviceinfo_banuse'){
        window.open('/Order',_self);
      }
      $(document).ready(function(){
        $('.jftca').click(function(){
          $('.jfgztc').addClass('select');
        });
        $('.jfgztc .close').click(function(){
          $('.jfgztc').removeClass('select');
        });

      })

      if(this.$route.query.name == 'all'){
        this.dingdan = this.title.qbdd;
        this.select = 0;
        this.sl2 = [1];
        let nb = Math.ceil(this.title.qbdd.showNumOrderRes?this.title.qbdd.showNumOrderRes.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }else if(this.$route.query.name == 'now'){
        this.select = 1;
        this.sl2 = [1];
        this.dingdan = this.title.zszdd;
        let nb = Math.ceil(this.title.zszdd.showNumOrderRes?this.title.zszdd.showNumOrderRes.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }else if(this.$route.query.name == 'overdue'){
        this.select = 2;
        this.dingdan = this.title.gqdd;
        this.sl2 = [1];
        let nb = Math.ceil(this.title.gqdd.showNumOrderRes?this.title.gqdd.showNumOrderRes.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }

      if(this.select == 0){
        $('.nrct .left div li').removeClass('select');
        $('.nrct .left .div4 .li1').addClass('select');
      }else if(this.select == 1){
        $('.nrct .left div li').removeClass('select');
        $('.nrct .left .div4 .li2').addClass('select');
      }else if(this.select == 2){
        $('.nrct .left div li').removeClass('select');
        $('.nrct .left .div4 .li3').addClass('select');
      }


    },


  watch:{
    select:function(){
      if(this.select == 0){
        $('.nrct .left div li').removeClass('select');
        $('.nrct .left .div4 .li1').addClass('select');
      }else if(this.select == 1){
        $('.nrct .left div li').removeClass('select');
        $('.nrct .left .div4 .li2').addClass('select');
      }else if(this.select == 2){
        $('.nrct .left div li').removeClass('select');
        $('.nrct .left .div4 .li3').addClass('select');
      }
    }
    ,
    // foobar:function(){
    //   if(this.foobar){
    //     this.select = this.foobar;
    //   }
    //
    // },
    "$route": function(){
      //路由变化会触发
      if(this.$route.query.name == 'all'){
        this.select = 0;
        this.dingdan = this.title.qbdd;
        this.sl2 = [1];
        let nb = Math.ceil(this.title.qbdd.showNumOrderRes?this.title.qbdd.showNumOrderRes.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }else if(this.$route.query.name == 'now'){
        this.select = 1;
        this.dingdan = this.title.zszdd;
        this.sl2 = [1];
        let nb = Math.ceil(this.title.zszdd.showNumOrderRes?this.title.zszdd.showNumOrderRes.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }else if(this.$route.query.name == 'overdue'){
        this.select = 2;

        this.dingdan = this.title.gqdd;
        this.sl2 = [1];
        let nb = Math.ceil(this.title.gqdd.showNumOrderRes?this.title.gqdd.showNumOrderRes.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }


      }
    }
  },
    methods:{
      qh:function(e){
        this.select = e;
        if(e==0){
          this.dingdan = this.title.qbdd;
        }else if(e==1){
          this.dingdan = this.title.zszdd;
        }else if(e==2){
          this.dingdan = this.title.gqdd;

        }
      },
      syy:function(){
        if(this.sl3>0){
          this.sl3 = this.sl3-1;
        }
      },
      xyy:function(){
        var nb =  Math.ceil(this.dingdan.showNumOrderRes?this.dingdan.showNumOrderRes.length/10:0);
        if(this.sl3<nb-1){
          this.sl3= this.sl3+1;
        }
      },
      qh2:function(e){
        this.sl3= e;
      },
      gmgb:function(){

        this.goumai.select = 0;
      },
      dkgm:function(e1,e2){
        var _this = this;
        this.goumai.select = 1;
        _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/showNumBuyData',{
          params:{
            userid:e1,
            serviceid:e2
          }
        })
          .then(function(response){
            _this.goumai.title = response.data.servicename;
            _this.goumai.jifen = response.data.buyneedscore;
            _this.goumai.userjf = response.data.userscore;
            _this.goumai.id = e2;


          });

      },
      gmjf:function(e1,e2){
        var _this = this;
        var sj;
        sj = 'userid='+e1+'&serviceid='+e2;
        _this.$axios.post('/api'+'/PInterface/UserCenter/showNumBuyOperation',sj)
          .then(function(response){
            _this.goumai.select = 0;
            // alert(response.data);
            _this.tcmsg= response.data;
            $('.right .tc').addClass('select');
            setTimeout(function(){
              //your codes
              window.location.reload()
            },800);


          });
      },
      tzlj:function(e,e2){
        // this.$router.push('/ServiceDetails/'+e+'?name='+e2);
        let herf = '/ServiceDetails/'+e+'?name='+e2;
        window.open(herf,'_blank')
      }
    }
  }
</script>

<style>
.right .tc.select{
  display: block;
}
</style>
